<template>
  <div class="rt-container mobile-matrix-scale">
    <div class="copy-writing-wrap">
      <div>
        {{ table.copyWriting.min }}
      </div>
      <div>
        {{ table.copyWriting.max }}
      </div>
    </div>
    <div
      v-for="row in getTableRows"
      class="card"
      :key="row.id"
    >
      <van-cell
        class="block-title"
        :title="row.label"
      />
      <div class="card-body">
        <el-rate
          v-model="dataValue[row.id]"
          :icons="[getCurrentIcon, getCurrentIcon, getCurrentIcon]"
          :colors="[iconColor, iconColor, iconColor]"
          :max="table.level"
          :void-icon="getCurrentIcon"
          class="rate"
          @change="handleChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="MatrixScale">
import "vant/lib/cell/style";
import "vant/lib/cell-group/style";
import { Cell, CellGroup } from "vant";
import "./icon/iconfont.css";
import { matrixScaleProps, useMatrixScale } from "./useMatrixScale";
const props = defineProps({
  ...matrixScaleProps
});

const emit = defineEmits(["update:value", "change"]);
const { dataValue, handleChange, getTableRows, getCurrentIcon } = useMatrixScale(props, emit);
</script>
<style lang="scss" scoped>
@use "./icon/iconfont.css" as *;

.mobile-matrix-scale {
  .card {
    background-color: #fafafa;

    .van-cell-group {
      background-color: transparent;
      margin-bottom: 10px;
    }

    .van-cell {
      background: transparent;
    }

    .card-body {
      padding: 0 16px;
      margin-bottom: 10px;
    }

    .block-title {
      .van-cell__title {
        font-weight: bold;
      }
    }
  }
}

.rt-container {
  .rt-table {
    width: 100%;
    min-width: 600px;
    font-size: 14px;
    color: #606266;
    background-color: #fff;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border: 1px solid #ebeef5;
    border-right: none;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow-x: auto;

    .t-header {
      align-items: flex-end !important;
      color: #606266;
      height: 75px;

      .td:first-child {
        height: 100%;
      }
    }

    .tbody {
      display: flex;
      flex-direction: column;
    }

    .tr {
      vertical-align: inherit;
      border-color: inherit;
      -webkit-box-flex: 1;
      flex: 1 0 auto;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: stretch;
      align-items: stretch;
    }

    .td,
    :deep(.el-rate__item) {
      flex: 1 0 auto;
      width: 50px;
      padding: 12px 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      overflow-wrap: break-word;
      position: relative;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      text-align: center;
      vertical-align: middle !important;
      font-size: 14px !important;
      color: #606266;
    }

    :deep(.el-rate__item:not(:last-child)) {
      line-height: inherit !important;
      border-right: none !important;
    }

    .tr .no-rg-border:not(:last-child) {
      border-right: none !important;
    }

    .rate {
      display: contents !important;
    }
  }
}
.copy-writing-wrap {
  display: flex;
  padding: 2px 5px;
  justify-content: space-between;
}
</style>
